<template>
  <div v-if="productId === ProductEnum.CiBao || productId === ProductEnum.CBYXB">全国（除港澳台外）</div>
  <a-tooltip v-else-if="areas">
    <template #title>点击查看</template>
    <div class="cursor-pointer" :class="{ 'ell-1': ellipsis }" @click="handleClick">
      {{ computedAreas }}
    </div>
  </a-tooltip>
  <span v-else>--</span>
  <BwArea :selected="areas" v-model:show="visible" lock :footer="null" />
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import BwArea from '@/views/price-sheet/components/BwArea.vue'
import { ProductEnum } from '@/core/enums/platform'

interface Props {
  areas?: string
  title?: string
  ellipsis?: boolean
  productId?: ProductEnum
}

const props = withDefaults(defineProps<Props>(), {
  title: '已出售城市',
  areas: '',
  ellipsis: false
})

const visible = ref(false)

const computedAreas = computed(() => {
  return ['全国', '中国'].includes(props.areas) ? '全国（除港澳台外）' : props.areas
})

function handleClick() {
  visible.value = true
}
</script>

<script lang="ts">
export default {
  name: 'AreaPopover'
}
</script>

<style lang="scss" scoped>
.sold-areas {
  width: 200px;
}
</style>
